<template>
    <div class="page-container">
        <div class="echarts-container" ref="main">
            crop
        </div>
    </div>
</template>
    
<script>

export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
    theme(){
    return this.$store.state.theme
    }
    },
    watch:{
    theme(e){
    //当主题改变时，
    //先销毁本次echarts
    this.myEcharts.dispose()
    //在重新创建
    this.getecharts()
    }
    },
    mounted() {
        this.getecharts()
        this.screen()
    },
    methods: {
        // 屏幕适配
        screen() {
            this.myEcharts.resize()
            let width = this.$refs.main.offsetWidth
            let num = width / 100 * 3
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                }
            }
            this.myEcharts.setOption(options)

        },


        async getecharts() {
            let width = this.$refs.main.offsetWidth
            let fontSize = width / 1000 * 60
            //2.初始化容器
            let myEcharts = this.$echarts.init(this.$refs.main, this.theme)
            this.myEcharts = myEcharts
            //请求后台接口
            let res = await this.$http('/api/TotalAreaCropsProportion')
            console.log(res);

            let options = {
                title: {
                    text: '种植农作物面积统计',
                    textStyle: {
                        fontSize
                    },
                    left: "2%",
                    top: '3%'
                },
                tooltip: {
                    trigger: 'item'
                },

                legend: {
                    // show:true,
                    // left:'center',
                    icon: 'vertical',
                    top: '15%',
                    left: '1%'

                },

                series: [
                    {
                        type: 'pie',
                        radius: "50%",
                        center: ["50%", '65%'],
                        data: res.data
                    }
                ]
            }
            //3.设置数据项
            myEcharts.setOption(options)
        }
    }
}

</script>
    
<style scoped></style>